<template>
  <div class="common-wrap">
    <MyForm
      v-model:formData="formData"
      v-model:columns="formColumns"
      :rules="rules"
      :labelWidth="100"
      :saveBtnLoading="saveBtnLoading"
      background="#fff"
      formBgColor="#fff"
      @submit="onSubmit"
    >
    </MyForm>
  </div>
</template>
<script setup>
import { ref, computed, onMounted, watch } from "vue";
import * as api from "@/api/index.js";
import i18n from "@/lang/index.js";
import { ElMessage } from "element-plus";
import { getDaysDiff, generateScheduleDescription } from "@/utils/mUtils.js";
import { useRoute } from "vue-router";
const route = useRoute();
const emits = defineEmits(["update:visible", "onSubmit"]);
defineOptions({
  name: "SailingScheduleAdd",
});
const formData = ref({});
const formColumns = ref([
  {
    title: "",
    structure: [
      {
        content: [
          {
            x: 18,
            y: 1,
            w: 6,
            h: 1,
            i: "1",
            label: "船期编号",
            prop: "scheduleNo",
            type: "label_input",
            placeholder: "请输入船期编号",
            disabled: true,
          },
          {
            x: 0,
            y: 1,
            w: 6,
            h: 1,
            i: "2",
            label: "干线名称",
            prop: "lineDetailId",
            type: "remote_select",
            params: {
              searchKey: "searchKey",
              keyValue: "id",
              name: "lineName",
              abbreviation: "code",
              showCustomizedOption: true,
              displayKey: {
                customizeLeft: "providerName",
                customizeCenter: "loadingPortName",
                customizeRight: "deliveryPortName",
              },
              queryId: true,
            },
            paramsKey: {
              lineDetailCode: "code",
              lineName: "lineName",
              providerName: "providerName",
              providerCode: "providerCode",
              loadingPortName: "loadingPortName",
              loadingPortCode: "loadingPortCode",
              dischargePortName: "dischargePortName",
              dischargePortCode: "dischargePortCode",
              deliveryPortName: "deliveryPortName",
              deliveryPortCode: "deliveryPortCode",
            },
            apiModule: api.default.common.trunkLine.queryLineDetailList,
            placeholder: "请选择干线名称",
          },

          {
            x: 0,
            y: 2,
            w: 6,
            h: 1,
            i: "3",
            label: "船公司",
            prop: "providerName",
            type: "label_input",
            placeholder: "请输入船公司",
            disabled: true,
          },
          {
            x: 0,
            y: 3,
            w: 6,
            h: 1,
            i: "4",
            label: "航线代码",
            prop: "lineDetailCode",
            type: "label_input",
            placeholder: "请输入航线代码",
            disabled: true,
          },
          {
            x: 0,
            y: 4,
            w: 6,
            h: 1,
            i: "5",
            label: "船名/航次",
            type: "label_multiple_autocomplete",
            options: [
              {
                prop: "vesselName",
                placeholder: "请输入船名",
                paramsKey: "vesselName",
                apiModule:
                  api.default.oceanFreight.sailingSchedule
                    .queryHistoryVesselNameList,
                width: "calc(50% - 5px)",
                marginRight: "5px",
              },
              {
                prop: "voyageNo",
                placeholder: "请输入航次",
                triggerOnFocus: true,
              },
            ],
          },
          {
            x: 6,
            y: 1,
            w: 6,
            h: 1,
            i: "7",
            label: "起运港",
            type: "label_multiple_input",
            options: [
              {
                prop: "loadingPortCode",
                disabled: true,
                width: "calc(50% - 5px)",
                marginRight: "5px",
              },
              {
                prop: "loadingPortName",
                disabled: true,
                marginRight: "0",
              },
            ],
          },
          {
            x: 6,
            y: 2,
            w: 6,
            h: 1,
            i: "8",
            label: "ETD/ATD",
            type: "label_multiple_date",
            options: [
              {
                prop: "estimatedTimeDeparture",
                format: "YYYY-MM-DD",
                valueFormat: "YYYY-MM-DD",
                dateType: "date",
                width: "calc(50% - 5px)",
                marginRight: "5px",
              },
              {
                prop: "actualTimeDeparture",
                format: "YYYY-MM-DD",
                valueFormat: "YYYY-MM-DD",
                dateType: "date",
                marginRight: "0",
              },
            ],
          },
          {
            x: 6,
            y: 4,
            w: 6,
            h: 1,
            i: "10",
            label: "卸货港",
            type: "label_multiple_input",
            options: [
              {
                prop: "dischargePortCode",
                disabled: true,
                width: "calc(50% - 5px)",
                marginRight: "5px",
              },
              {
                prop: "dischargePortName",
                disabled: true,
                marginRight: "0",
              },
            ],
          },
          {
            x: 6,
            y: 5,
            w: 6,
            h: 1,
            i: "11",
            label: "ETA/ATA",
            type: "label_multiple_date",
            options: [
              {
                prop: "estimatedTimeArrivalDischarge",
                format: "YYYY-MM-DD",
                valueFormat: "YYYY-MM-DD",
                dateType: "date",
                width: "calc(50% - 5px)",
                marginRight: "5px",
              },
              {
                prop: "actualTimeArrivalDischarge",
                placeholder: "请选择实际到达卸货港时间",
                format: "YYYY-MM-DD",
                valueFormat: "YYYY-MM-DD",
                dateType: "date",
                marginRight: "0",
              },
            ],
          },
          {
            x: 6,
            y: 7,
            w: 6,
            h: 1,
            i: "13",
            label: "目的港",
            type: "label_multiple_input",
            options: [
              {
                prop: "deliveryPortCode",
                disabled: true,
                width: "calc(50% - 5px)",
                marginRight: "5px",
              },
              {
                prop: "deliveryPortName",
                disabled: true,
                marginRight: "0",
              },
            ],
          },
          {
            x: 6,
            y: 8,
            w: 6,
            h: 1,
            i: "14",
            label: "ETA/ATA",
            type: "label_multiple_date",
            options: [
              {
                prop: "estimatedTimeArrivalDelivery",

                format: "YYYY-MM-DD",
                valueFormat: "YYYY-MM-DD",
                dateType: "date",
                width: "calc(50% - 5px)",
                marginRight: "5px",
              },
              {
                prop: "actualTimeArrivalDelivery",

                format: "YYYY-MM-DD",
                valueFormat: "YYYY-MM-DD",
                dateType: "date",
                marginRight: "0",
              },
            ],
          },
          {
            x: 18,
            y: 2,
            w: 6,
            h: 1,
            i: "16",
            label: "预期航程",
            prop: "proposedTransitTime",
            type: "label_input",
            disabled: true,
            placeholder: "请输入预期航程",
          },
          {
            x: 12,
            y: 2,
            w: 6,
            h: 1,
            i: "17",
            label: "开港时间",
            prop: "portOpeningTime",
            type: "label_date",
            placeholder: "请选择开港时间",
            dateType: "date",
            format: "YYYY-MM-DD",
            valueFormat: "YYYY-MM-DD",
          },
          {
            x: 0,
            y: 6,
            w: 6,
            h: 1,
            i: "18",
            label: "预计装柜时间",
            prop: "estimatedStuffingTime",
            type: "label_date",
            placeholder: "请选择预计装柜时间",
            format: "YYYY-MM-DD",
            valueFormat: "YYYY-MM-DD",
            dateType: "date",
          },
          {
            x: 12,
            y: 3,
            w: 6,
            h: 1,
            i: "19",
            label: "截单时间",
            prop: "shippingInstructionCutoffTime",
            type: "label_date",
            placeholder: "请选择截单时间",
            format: "YYYY-MM-DD HH:mm",
            valueFormat: "YYYY-MM-DD HH:mm",
          },
          {
            x: 12,
            y: 4,
            w: 6,
            h: 1,
            i: "20",
            label: "截重时间",
            prop: "containerYardClosingTime",
            type: "label_date",
            placeholder: "请选择截重时间",
            format: "YYYY-MM-DD HH:mm",
            valueFormat: "YYYY-MM-DD HH:mm",
          },
          {
            x: 12,
            y: 5,
            w: 6,
            h: 1,
            i: "21",
            label: "截关时间",
            prop: "customsClosingTime",
            type: "label_date",
            placeholder: "请选择截关时间",
            format: "YYYY-MM-DD HH:mm",
            valueFormat: "YYYY-MM-DD HH:mm",
          },
          {
            x: 12,
            y: 1,
            w: 6,
            h: 1,
            i: "22",
            label: "截货时间",
            prop: "cargoReceivingCutoffTime",
            type: "label_date",
            placeholder: "请选择截货时间",
            format: "YYYY-MM-DD HH:mm",
            valueFormat: "YYYY-MM-DD HH:mm",
          },
          {
            x: 12,
            y: 6,
            w: 6,
            h: 1,
            i: "23",
            label: "截VGM时间",
            prop: "verifiedGrossMassCutoffTime",
            type: "label_date",
            placeholder: "请选择截VGM时间",
            format: "YYYY-MM-DD HH:mm",
            valueFormat: "YYYY-MM-DD HH:mm",
          },

          {
            x: 18,
            y: 3,
            w: 6,
            h: 3,
            i: "24",
            label: "船期描述",
            prop: "vesselSchedule",
            type: "label_input",
            inputType: "textarea",
            placeholder: "请输入船期描述",
            maxlength: 200,
            span: 16,
          },
        ],
      },
    ],
  },
]);
const rules = ref({
  lineDetailId: [
    {
      required: true,
      trigger: ["blur", "change"],
    },
  ],
  providerName: [
    {
      required: true,
      trigger: ["blur", "change"],
    },
  ],
  lineDetailCode: [
    {
      required: true,
      trigger: ["blur", "change"],
    },
  ],
  vesselName: [
    {
      required: true,
      trigger: ["blur", "change"],
    },
  ],
  voyageNo: [
    {
      required: true,
      trigger: ["blur", "change"],
    },
  ],
  estimatedStuffingTime: [
    {
      required: true,
      trigger: ["blur", "change"],
    },
  ],
  loadingPortName: [
    {
      required: true,
      trigger: ["blur", "change"],
    },
  ],
  estimatedTimeDeparture: [
    {
      required: true,
      trigger: ["blur", "change"],
    },
  ],
  actualTimeDeparture: [
    {
      required: true,
      trigger: ["blur", "change"],
    },
  ],
  dischargePortName: [
    {
      required: true,
      trigger: ["blur", "change"],
    },
  ],
  estimatedTimeArrivalDischarge: [
    {
      required: true,
      trigger: ["blur", "change"],
    },
  ],
  actualTimeArrivalDischarge: [
    {
      required: true,
      trigger: ["blur", "change"],
    },
  ],
  deliveryPortName: [
    {
      required: true,
      trigger: ["blur", "change"],
    },
  ],
  estimatedTimeArrivalDelivery: [
    {
      required: true,
      trigger: ["blur", "change"],
    },
  ],
  actualTimeArrivalDelivery: [
    {
      required: true,
      trigger: ["blur", "change"],
    },
  ],
});
const saveBtnLoading = ref(false);
watch(
  () => formData.value.estimatedTimeDeparture,
  (val) => {
    formData.value.proposedTransitTime = getDaysDiff(
      formData.value.estimatedTimeArrivalDelivery,
      val
    );
    formData.value.vesselSchedule = generateScheduleDescription(
      val,
      formData.value.shippingInstructionCutoffTime
    );
  }
);
watch(
  () => formData.value.estimatedTimeArrivalDelivery,
  (val) => {
    formData.value.proposedTransitTime = getDaysDiff(
      val,
      formData.value.estimatedTimeDeparture
    );
  }
);
watch(
  () => formData.value.shippingInstructionCutoffTime,
  (val) => {
    formData.value.vesselSchedule = generateScheduleDescription(
      formData.value.estimatedTimeDeparture,
      val
    );
  }
);
onMounted(() => {
  if (route.query.id) {
    getInfo();
    return;
  }
});
const getInfo = async () => {
  saveBtnLoading.value = true;
  try {
    const { data } = await api.default.oceanFreight.sailingSchedule.getInfo(
      route.query.id
    );
    formData.value = { ...data };
    saveBtnLoading.value = false;
  } catch (err) {
    saveBtnLoading.value = false;
  }
};

const onSubmit = () => {
  const parmas = {
    ...formData.value,
  };
  if (!route.query.id) {
    // 新增
    saveBtnLoading.value = true;
    api.default.oceanFreight.sailingSchedule
      .add({
        ...parmas,
      })
      .then(() => {
        ElMessage.success("新增成功");
        saveBtnLoading.value = false;
        emits("onSubmit");
      })
      .catch(() => {
        saveBtnLoading.value = false;
      });
  } else {
    // 编辑
    saveBtnLoading.value = true;
    api.default.oceanFreight.sailingSchedule
      .edit(parmas)
      .then(() => {
        ElMessage.success("修改成功");
        saveBtnLoading.value = false;
        emits("onSubmit");
      })
      .catch(() => {
        saveBtnLoading.value = false;
      });
  }
};
</script>
<style lang="scss" scoped>
.search-btn {
  width: 120px;
  margin: 20px auto 0;
}
</style>
